<template>
  <div>
    <el-row :gutter="10">
      <el-col :span="6">
        <el-card>
          <Detail title="总销售额" :count="`￥ ${listState.salesTotal}`">
            <template slot="charts">
              <div class="salebox">
                <span
                  >周同比&nbsp;&nbsp;{{
                    Math.abs(listState.salesGrowthLastMonth)
                  }}%
                  <svg
                    v-if="listState.salesGrowthLastMonth > 0"
                    t="1681137762109"
                    class="icon"
                    viewBox="0 0 1024 1024"
                    version="1.1"
                    xmlns="http://www.w3.org/2000/svg"
                    p-id="2607"
                    width="16"
                    height="16"
                  >
                    <path
                      d="M194.108395 621.186771 863.223758 621.186771 528.668123 251.67295Z"
                      fill="#d81e06"
                      p-id="2608"
                    ></path>
                  </svg>
                  <svg
                    v-else
                    t="1681137940469"
                    class="icon"
                    viewBox="0 0 1024 1024"
                    version="1.1"
                    xmlns="http://www.w3.org/2000/svg"
                    p-id="6538"
                    id="mx_n_1681137940470"
                    width="16"
                    height="16"
                  >
                    <path
                      d="M840.4 300H183.6c-19.7 0-30.7 20.8-18.5 35l328.4 380.8c9.4 10.9 27.5 10.9 37 0L858.9 335c12.2-14.2 1.2-35-18.5-35z"
                      fill="#2aa515"
                      p-id="6539"
                    ></path>
                  </svg>
                </span>
                &nbsp;
                <span>
                  日同比&nbsp;&nbsp;{{
                    Math.abs(listState.salesGrowthLastDay)
                  }}%
                  <svg
                    v-if="listState.salesGrowthLastDay > 0"
                    t="1681137762109"
                    class="icon"
                    viewBox="0 0 1024 1024"
                    version="1.1"
                    xmlns="http://www.w3.org/2000/svg"
                    p-id="2607"
                    width="16"
                    height="16"
                  >
                    <path
                      d="M194.108395 621.186771 863.223758 621.186771 528.668123 251.67295Z"
                      fill="#d81e06"
                      p-id="2608"
                    ></path>
                  </svg>
                  <svg
                    v-else
                    t="1681137940469"
                    class="icon"
                    viewBox="0 0 1024 1024"
                    version="1.1"
                    xmlns="http://www.w3.org/2000/svg"
                    p-id="6538"
                    id="mx_n_1681137940470"
                    width="16"
                    height="16"
                  >
                    <path
                      d="M840.4 300H183.6c-19.7 0-30.7 20.8-18.5 35l328.4 380.8c9.4 10.9 27.5 10.9 37 0L858.9 335c12.2-14.2 1.2-35-18.5-35z"
                      fill="#2aa515"
                      p-id="6539"
                    ></path>
                  </svg>
                </span>
              </div>
            </template>
            <template slot="footer">
              <span>日销售额￥{{ listState.salesToday }}</span>
            </template>
          </Detail>
        </el-card>
      </el-col>

      <el-col :span="6">
        <el-card>
          <Detail title="访问量" :count="listState.visitTotal">
            <template slot="charts">
              <lineChart />
            </template>
            <template slot="footer">
              <span>日访问量 {{ listState.visitToday }}</span>
            </template>
          </Detail>
        </el-card>
      </el-col>

      <el-col :span="6">
        <el-card>
          <Detail title="支付笔数" :count="listState.payTotal">
            <template slot="charts">
              <bar-charts />
            </template>
            <template slot="footer">
              <span>转化率 {{ listState.payRate }}%</span>
            </template>
          </Detail>
        </el-card>
      </el-col>

      <el-col :span="6">
        <el-card>
          <Detail title="运营活动效果" :count="`${listState.activityRate}%`">
            <template slot="charts">
              <progressCharts />
            </template>
            <template slot="footer">
              <div class="salebox2">
                <span
                  >周同比&nbsp;&nbsp;{{
                    Math.abs(listState.activityGrowthLastMonth)
                  }}%
                  <svg
                    v-if="listState.activityGrowthLastMonth > 0"
                    t="1681137762109"
                    class="icon"
                    viewBox="0 0 1024 1024"
                    version="1.1"
                    xmlns="http://www.w3.org/2000/svg"
                    p-id="2607"
                    width="16"
                    height="16"
                  >
                    <path
                      d="M194.108395 621.186771 863.223758 621.186771 528.668123 251.67295Z"
                      fill="#d81e06"
                      p-id="2608"
                    ></path>
                  </svg>
                  <svg
                    v-else
                    t="1681137940469"
                    class="icon"
                    viewBox="0 0 1024 1024"
                    version="1.1"
                    xmlns="http://www.w3.org/2000/svg"
                    p-id="6538"
                    id="mx_n_1681137940470"
                    width="16"
                    height="16"
                  >
                    <path
                      d="M840.4 300H183.6c-19.7 0-30.7 20.8-18.5 35l328.4 380.8c9.4 10.9 27.5 10.9 37 0L858.9 335c12.2-14.2 1.2-35-18.5-35z"
                      fill="#2aa515"
                      p-id="6539"
                    ></path>
                  </svg>
                </span>
                &nbsp;
                <span>
                  日同比&nbsp;&nbsp;{{
                    Math.abs(listState.activityGrowthLastDay)
                  }}%
                  <svg
                    v-if="listState.activityGrowthLastDay > 0"
                    t="1681137762109"
                    class="icon"
                    viewBox="0 0 1024 1024"
                    version="1.1"
                    xmlns="http://www.w3.org/2000/svg"
                    p-id="2607"
                    width="16"
                    height="16"
                  >
                    <path
                      d="M194.108395 621.186771 863.223758 621.186771 528.668123 251.67295Z"
                      fill="#d81e06"
                      p-id="2608"
                    ></path>
                  </svg>
                  <svg
                    v-else
                    t="1681137940469"
                    class="icon"
                    viewBox="0 0 1024 1024"
                    version="1.1"
                    xmlns="http://www.w3.org/2000/svg"
                    p-id="6538"
                    id="mx_n_1681137940470"
                    width="16"
                    height="16"
                  >
                    <path
                      d="M840.4 300H183.6c-19.7 0-30.7 20.8-18.5 35l328.4 380.8c9.4 10.9 27.5 10.9 37 0L858.9 335c12.2-14.2 1.2-35-18.5-35z"
                      fill="#2aa515"
                      p-id="6539"
                    ></path>
                  </svg>
                </span>
              </div>
            </template>
          </Detail>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import Detail from "./Detail";
import barCharts from "./barCharts";
import lineChart from "./lineChart";
import progressCharts from "./progressCharts";
import { mapState } from "vuex";
export default {
  computed: {
    ...mapState({
      listState: (state) => state.home.list,
    }),
  },
  components: {
    Detail,
    lineChart,
    barCharts,
    progressCharts,
  },
};
</script>

<style lang="scss" scoped>
.salebox {
  padding-top: 20px;
  span {
    font-size: 14px;
  }
  svg {
    vertical-align: middle;
  }
}

.salebox2 {
  svg {
    vertical-align: middle;
  }
}
</style>
